import React, { Component, useRef, useEffect } from 'react';

import WebViewer from '@pdftron/pdfjs-express-viewer';

export default (props: any) => {
  const viewer = useRef(null);

  useEffect(() => {
    WebViewer(
      {
        path: '/webviewer/lib/public',
        licenseKey: 'G5jTR7xLHAvtTGlUirce',
        domain: '330409764@.com',
        config: './config.js',
        initialDoc: props?.pdfUrl,
      },
      viewer.current,
    ).then((instance) => {
      // now you can access APIs through the WebViewer instance

      const { documentViewer } = instance.Core;

      const path = 'https://sxit-gc.oss-cn-beijing.aliyuncs.com/tdf-bms-file/icon/log.png';

      // Promise resolves with options object
      const promise = new Promise((resolve) => {
        const img = new Image();
        const options = {
          footer: {},
          custom: (ctx, pageNumber, pageWidth, pageHeight) => {
            // the pageNumber is also passed in so you could have
            // a different watermark for each page
            ctx.drawImage(img, pageWidth / 2 - img.width / 2, pageHeight / 2 - img.height / 2);
          },
        };
        img.onload = () => {
          return resolve(options);
        };
        img.src = path;
      });

      documentViewer.setWatermark(promise);
    });
  }, []);

  return (
    <div className="MyComponent">
      <div
        className="webviewer"
        style={{ height: '500px' }}
        crossOrigin="anonymous"
        ref={viewer}
      ></div>
    </div>
  );
};
